<template>
	<div>
		<el-dialog title="" :visible.sync="pageIsShow" width="350px" center :destroyOnClose='true'
			:modal-append-to-body="false" @closed="handleClosed">
			<!-- <div class="goBackButtonBox">
			<div @click="handleClosed" class="item cursor-pointer el-icon-arrow-left font24"></div>
		</div> -->
			<div class="contentBox">
				<div>是否存在敏感词:
					<i v-show="!isInclude" style="color: #00ff00;">不存在</i>
					<i v-show="isInclude" class="color-error">存在</i>
				</div>
				<div v-html="highlightedText" class="stateContent marginT15"></div>
			</div>
		</el-dialog>
	</div>
</template>
<!-- 使用前端检测 过于消耗流量 -->
<script>
	import {
		getInfo
	} from "@/api/dict";
	export default {
		data() {
			return {
				pageIsShow: false, //页面显示
				sensitiveWords: [], // 示例敏感词列表
				contentText: '', // 用户输入的文本
				highlightedText: '', // 高亮显示后的文本
				isInclude: false, //是否存在敏感词
				stateId: -1, //回之前页面的动态id
				selectValue: -1,
				code: "sensitiveWords", //数据库查询敏感词列表code
			};
		},
		mounted() {
			
		},
		methods: {
			initData(obj) {
				try {
					let {
						code,
						selectValue,
						contentText
					} = obj
					this.pageIsShow = true;
					this.stateId = code
					this.selectValue = selectValue
					this.contentText = contentText
					getInfo({
						code: this.code
					}).then(res => {
						try {
							let item = res.data[0].value || "";
							if (res.data.length && item) {
								this.sensitiveWords.push(...item.split(','))
							}
							this.detectSensitiveWords();
						} catch (error) {
						}
					})
				} catch (error) {}
			},
			//关闭
			handleClosed() {
				this.pageIsShow = false;
			},
			detectSensitiveWords() {
				let foundSensitiveWord = false;
				try {
					this.sensitiveWords.forEach(word => {
						const regex = new RegExp(`(${word})`, 'gi');
						if (regex.test(this.contentText)) {
							foundSensitiveWord = true;
						}
						this.highlightedText = this.contentText.replace(regex,
							'<span style="color: red;">$1</span>');
						if (foundSensitiveWord) {
							throw new Error("find");
						}
					});
				} catch (error) {}
				this.isInclude = foundSensitiveWord;
			}
		}
	};
</script>

<style scoped>
	/* 返回的按钮 */
	.goBackButtonBox {
		font-size: 24px;
		font-weight: 500;
		display: inline-block;
		position: fixed;
		left: 0;
		top: 0;
		margin: 0;
		padding: 0 20px;
		z-index: 22;
		width: 100%;
		height: 30px;
		line-height: 30px;
		text-align: left;
		background-color: #fff;
	}

	.goBackButtonBox .item {
		width: 50px;
	}

	.contentBox {
		width: 100%;
		margin: 30px 0 80px 0;
		padding: 0 5px;
		box-sizing: border-box;
		text-align: left;
		overflow: hidden;
	}

	.stateContent {
		width: calc(100% - 10px);
		white-space-collapse: preserve-breaks;
		white-space: pre-line;
		background-color: #d9ffff;
	}
</style>